<template>
  <div>
    <h1>备忘录</h1>
    <TodoInput @add-todo="handleAddTodo"/>
    <TodoItem
      v-for="todo in todos"
      :key="`todo-${todo.id}`"
      :id="todo.id"
      :title="todo.title"
      :hasFinish="todo.hasFinish"
      @toggle-finish="handleToggleFinish"
      @delete-todo="handleDeleteTodo"
    />
  </div>
</template>

<script>
import TodoInput from './components/TodoInput'
import TodoItem from './components/TodoItem'

export default {
  data () {
    return {
      todos: [
        { id: 1, title: '吃饭', hasFinish: true },
        { id: 2, title: '睡觉', hasFinish: false },
        { id: 3, title: '打代码', hasFinish: true }
      ]
    }
  },
  methods: {
    handleAddTodo ({ title }) {
      this.todos.push({
        id: Date.now(),
        title,
        hasFinish: false
      })
    },
    handleToggleFinish ({ id }) {
      this.todos = this.todos.map(todo => {
        if (todo.id === id) todo.hasFinish = !todo.hasFinish
        return todo
      })
    },
    handleDeleteTodo ({ id }) {
      this.todos = this.todos.filter(todo => todo.id !== id)
    }
  },
  components: {
    TodoInput,
    TodoItem
  }
}
</script>
